<template>
  <div id="orderdetail">
    <div class="status">
      <h1>已完成</h1>
    </div>
    <div class="detail">
      <div class="text">
        <span>商品总额</span>￥194.80
      </div>
      <div class="text">
        <span>优惠金额</span>￥00.00
      </div>
      <div class="text">
        <span>实付金额</span>￥194.80
      </div>
      <div class="text">
        <span>订单编号</span>89754613584
      </div>
      <div class="text">
        <span>下单时间</span>2018-12-20 15:59:04
      </div>
    </div>
    <div class="handle">
      <h5>操作</h5>
      <router-link
      :to="{name: 'Return'}"
      tag="button"
      >订单疑问</router-link>
    </div>
    <div class="message">
      <div class="tui">退货申请</div>
      <div class="reDetail">
        <h3>退货申请审核中…</h3>
        <span>2018-12-26 09:32:55</span>
      </div>
      <div class="reDetail">
        <h3>退货申请提交</h3>
        <span>2018-12-26 09:30:34</span>
      </div>
      <P>已收到退款申请。蓝驴生活将在12小时内为您处理退款，请您耐心等待。给您带来不便，敬请谅解！</P>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Orderdetail',
  created () {
    document.title = '订单详情'
  }
}
</script>

<style lang='scss' scoped>
#orderdetail{
  .status{
    height: 26.13vw;
    background-color: #fff;
    padding: 0 3.46vw;
    line-height: 26.13vw;
    font-size: 7.46vw;
    font-family: SourceHanSansCN-Bold;
    font-weight: bold;
    color: rgba(22,22,22,1);
    box-shadow:0px 8px 21px 0px rgba(0,0,0,0.06);
  }
  .detail{
    height: 52.8vw;
    padding: 0 3.46vw;
    background-color: #fff;
    margin-top: 2vw;
    overflow: hidden;
    .text{
      font-size: 3.73vw;
      font-family: SourceHanSansCN-Bold;
      font-weight: bold;
      color: rgba(22,22,22,1);
       margin-top: 5.33vw;
      span{
        font-size: 3.73vw;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(134,134,134,1);
        margin-right: 4vw;
      }
    }
  }
  .handle{
    height: 28vw;
    margin-top: 4vw;
    padding: 5.33vw 3.46vw;
    background-color: #fff;
    box-sizing: border-box;
    button{
      width: 28vw;
      height: 8.26vw;
      border-radius: 4.66vw;
      border: 1px solid rgba(216,216,216,1);
      background-color: #fff;
      margin-top: 5.33vw;
      outline: none;
    }
  }
  .message{
    padding: 5.33vw 3.46vw;
    background-color: #fff;
    margin-top: 4vw;
    margin-bottom: 8vw;
    box-sizing: border-box;
    .tui{
      font-size: 3.73vw;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(22,22,22,1);
    }
    .reDetail{
      h3{
        font-size: 4.53vw;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(22,22,22,1);
        margin-top: 8vw;
        margin-bottom: 2.66vw;
        line-height: 6.86vw;
      }
      span{
        font-size: 3.73vw;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(134,134,134,1);
      }
    }
    P{
      font-size: 3.73vw;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(134,134,134,1);
      line-height: 5.06vw;
      margin-top: 8vw;
    }
  }
}
</style>
